<template>
  <span class="forget" @click="dialogFormVisible = true">修改密码</span>
  <el-dialog :show-close="false" v-model="dialogFormVisible" title="修改密码">
    <el-form ref="ruleFormRef" :model="form" :rules="rules">
      <el-form-item label="用户名：" label-width="80px" prop="name">
        <el-input
          autocomplete="off"
          class="form-name"
          v-model.trim.lazy="form.name"
        />
      </el-form-item>
      <el-form-item label="密码：" label-width="80px" prop="password">
        <el-input
          autocomplete="off"
          v-model.trim.lazy="form.psw"
          show-password
        />
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
      <el-button class="cancel" @click="DialogCancel">取消</el-button>
      <el-button type="primary" class="ok" @click="handleChange">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
const ruleForm = ref({
  name: '',
  password: '',
})
//表单校验
const rules = ref({
  name: [
    {
      required: true,
      message: '用户名不能为空',
      tigger: 'blur',
    },
    {
      min: 3,
      max: 8,
      message: '用户名长度必须在3~8之间！',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      tigger: 'blur',
    },
  ],
})
const dialogFormVisible = ref(false)

// 注册表单
const form = reactive({
  name: '',
  psw: '',
})

// 注册表单点击关闭或取消事件
function DialogCancel() {
  dialogFormVisible.value = false
  form.name = ''
  form.psw = ''
}

async function handleRegister() {
  // 控制显示和隐藏
  dialogFormVisible.value = false
  // 向后台发送添加的请求
  const res = await getNewUserHttp(form.name, form.psw)
  // 弹出消息
  ElMessage({
    message: '修改成功！',
    type: 'success',
  })

  // 添加完毕后清空表单
  form.name = ''
  form.psw = ''
}
</script>

<style scoped>
@import url('./style/LoginForget.css');
</style>
